{% extends "base.html" %} {% block head %} {{ super() }}



<script
	src="{{url_for('static', filename='../static/js/zmultipages.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script src="{{url_for('static', filename='../static/js/ztable.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script src="{{url_for('static', filename='../static/js/zform.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script src="{{url_for('static', filename='../static/js/Wizard.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script>
	$(document).ready(function() {
		/*
		function load_category($category){
			//Set value to submit form
			
			name = $category.find('td[name="name"]').text()
			$('#category-name').val(name);
			
			description = $category.find('td[name="description"]').text();
			$('#category-description').val(description);
			
			id = $category.find('input[name="selected"]').val()
			$('#category-id').val(id);
			$('#category-action').val('edit');
		}
		
		//table = $('#categories-table').ZTable({load_callback:load_category});
		*/
		var wizard = new Wizard({form_id:'category-form'});
		
		var	multiPages = $('#category-form').ZMultiPages({
					height:250,
					validationUrl : '/validate_item',
					getValidationInputs:wizard.getValidationInputs,
					showErrors:wizard.showErrors,
					resetLabels:wizard.resetLabels});
				
		//var categories = {{categories}};
	});
</script>
{% endblock %} 

{% block content %}
	
<div class="container">

	<div class="panel panel-default col-md-12">
		<form id="categories-list-form" class="items-form" action="/delete_items"
			method="post">
			<div class="panel-body">
				<div class="col-md-6">
					<h3>Manage Categories</h3>
				</div>
				<div class="panel-btn-area col-md-6" style="padding-top: 18px;">
					<input id="category-add-btn" type="button"
						class="btn btn-primary col-md-3" name="add-category" value="Add" />
					<input id="category-edit-btn" type="button"
						class="btn btn-primary col-md-3 col-md-offset-1"
						name="edit-category" value="Edit" />
					<button id="category-del-btn" type="submit"
						class="submit btn btn-primary col-md-3 col-md-offset-1"
						name="delete-category">Delete</button>
				</div>

				<div>

					<table id="categories-table" class="table" mode="normal"
						style="height: 200px; overflow: auto;">
						<thead>
							<tr>
								<td><input type="checkbox"></td>
								<th>Name</th>
								<th>Description</th>
								<th>Parent</th>
							</tr>
						</thead>
						<tbody>
							{% if categories !=None %}
								{% for category in categories %}
							<tr>
								<td><input type="checkbox" name="selected" value="{{ category.id }}"></td>
								<td name="name">{{category.name}}</td>
								<td name="description">{{category.description}}</td>
								<td name="parent">{{category.parent}}</td>
							</tr>
								{% endfor %} 
							{% endif %}
						</tbody>
					</table>
				</div>
				<br />
				<p>Rows 1-10 of 48</p>
			</div>

		</form>
	</div>



	<div class="col-md-12">
		<form id="category-form" enctype="multipart/form-data" action="/manage_categories" method="post">
		
			<div class="z-title col-md-8">
				<h3>Manage your Categories</h3>
			</div>
			
			<div class="z-page" value="0">
			
				<div class="form-left-side col-md-7">
					<!-- Category name -->
					<div class="row form-group" name="name">
						<div class="col-md-7">
							<input class="form-control z-input" type="text" placeholder="Category name" />
						</div>
	
						<div class="col-md-4 z-label">Category name</div>
					</div>
					
					<!-- Category description -->
					<div class="row form-group" name="description" >
						<div class="col-md-7">
							<textarea class="form-control z-input" rows="5"
								placeholder="Description"></textarea>
						</div>
	
						<div class="col-md-4 z-label">Category description</div>
					</div>
					
					
				</div><!-- end form-left-side -->

				<div class="form-right-side col-md-5">
					<!--Category Parent-->
					<div class="row form-group" name="parent">
						<div class="col-md-7">
							<select class="form-control z-input">
								<option value="0">None</option>
								{% if categories !=None %}
									{% for category in categories %}
									<option>{{category.name}}</option>
									{% endfor %} 
								{% endif %}
							</select>
						</div>
						<div class="col-md-4 z-label">Parent category</div>
					</div>
	
					<input id="category-action" name="action" style="display: none;" />
					<input id="category-id" name="id" style="display: none;" />
				</div><!-- end form-right-side -->
				

			</div><!-- End of page 0 -->
			
				<div class="row col-md-11">
					<div class="btn-toolbar col-md-7 z-btn-area">
						<button type="submit" class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
					</div>
				</div>
					
		</form>
	</div>
</div>

{% endblock %}